<template>
  <view class="page-container" v-if="shop.name && shenheStatus == 0">
    <view class="shop-section">
      <view class="section-head">
        <view class="shop-address">
          <view class="shop-info" @click="guideToShop">
            <view>
              <view class="name">{{ shop.name }}</view>
              <view class="address">
                <text>{{ shop.address }}</text>
              </view>
            </view>
            <view class="shu-line"></view>
          </view>
          <image
            class="shop-phone-icon"
            :src="asyncImgs.alipay.green_phone_icon"
            @click="phoneToShop(shop.phone)"
            mode=""
          />
        </view>
      </view>
      <view class="section-body">
        <view class="good-list">
          <view
            class="good-list-item"
            v-for="(item, index) in shop.pic"
            :key="index"
          >
            <image :src="item" mode="" />
          </view>
        </view>
      </view>
      <view class="section-foot">
        <view class="shop-msg">{{ $t("facePay.business") }}</view>
        <!-- <view class="shop-classify">商家品类：{{ shop.business_nature }}</view> -->
        <view class="shop-time"
          >{{ $t("shop.startTime") }}：{{ shop.open_time }}</view
        >
        <!-- <view class="shop-ability">查看营业资质</view> -->
      </view>
    </view>
    <view class="shop-serve">
      <view class="title">{{ $t("alipay.serve") }}</view>
      <view class="msg">{{ shop.service }}</view>
    </view>
    <!-- <view class="default-btn">举报商家</view> -->
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      shop: {}
    };
  },
  filters: {},
  onLoad(t) {
    this.getShopInfo();
  },
  onShow() {},
  methods: {
    getShopInfo() {
      this.$allrequest.alipay.getShopInfo({}, true).then((res) => {
        if (!res.code) {
          this.shop = res.data;
        }
      });
    },
    // 拨打商家电话
    phoneToShop(num) {
      this.$utils.makePhoneCall(num);
    },
    // 导航到店
    guideToShop() {
      uni.openLocation({
        latitude: parseFloat(this.shop.latitude),
        longitude: parseFloat(this.shop.longitude)
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  min-height: 100vh;
  font-family: PingFang SC;
  background: #f5f5f5;
  padding-top: 3.2vw;
  .shop-section {
    width: 93.6vw;
    background: #ffffff;
    border-radius: 2.13vw;
    margin: 0 auto;
    padding: 4vw 3.2vw;
    .section-head {
      .shop-address {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .shop-info {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #191919;
          .name {
            max-width: 71.07vw;
            font-size: 3.73vw;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .address {
            display: flex;
            align-items: center;
            font-size: 3.2vw;
            font-weight: 400;
            margin-top: 1.07vw;
            color: #666666;
            text {
              display: block;
              max-width: 67vw;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .shu-line {
            width: 0.13vw;
            height: 9.33vw;
            background: #e5e5e5;
            margin: 0 4.93vw;
          }
        }
        .shop-phone-icon {
          width: 5.33vw;
          height: 5.33vw;
          background-size: 100%;
        }
      }
    }
    .section-body {
      margin-top: 2.93vw;
      .good-list {
        display: flex;
        align-items: center;
        .good-list-item {
          width: 19.2vw;
          height: 19.2vw;
          background: #f9f9f9;
          border: 0.13vw solid rgba(112, 112, 112, 0.2);
          border-radius: 1.33vw;
          margin-right: 2.13vw;
          image {
            width: 100%;
            height: 100%;
            display: block;
            background-size: 100%;
          }
        }
        .good-list-item:last-child {
          margin-right: 0;
        }
      }
    }
    .section-foot {
      margin-top: 3.73vw;
      .shop-msg {
        font-size: 3.73vw;
        font-weight: 600;
        color: #191919;
      }
      .shop-classify,
      .shop-time {
        font-size: 3.2vw;
        font-weight: 400;
        color: #666666;
        margin-top: 1.6vw;
      }

      .shop-ability {
        width: 27.73vw;
        height: 7.47vw;
        background: #ffffff;
        border: 0.13vw solid #cccccc;
        border-radius: 8vw;
        margin: 4.53vw auto 0;
        font-size: 3.2vw;
        font-weight: 400;
        color: #666666;
        text-align: center;
        line-height: 7.47vw;
      }
    }
  }
  .shop-serve {
    width: 93.6vw;
    background: #ffffff;
    border-radius: 2.13vw;
    padding: 4vw 3.2vw;
    margin: 0 auto;
    .title {
      font-size: 3.73vw;
      font-weight: 600;
      color: #191919;
    }
    .msg {
      font-size: 3.2vw;
      font-weight: 400;
      color: #666666;
      margin-top: 2.13vw;
    }
  }
  .default-btn {
    width: 93.6vw;
    height: 12vw;
    background: #ffffff;
    border-radius: 2.13vw;
    margin: 3.2vw auto;
    font-size: 3.73vw;
    font-weight: 600;
    color: #666666;
    text-align: center;
    line-height: 12vw;
  }
}
</style>
